<template>
    <div class="gpt-bg">
        <img src="../../assets/Chat_Gpt/gpt.png" class="gpt-ico" alt="">
        <p class="gpt-mess" v-html="props.now ? SLOW : showMessage"></p>
    </div>
</template>

<script setup lang='js' name=''>
import { defineProps, computed, ref } from 'vue'
const emit = defineEmits(["goUnder", "printOK"])
const props = defineProps(['mess', 'now'])
const flag = props.now
const MESS = computed(() => {
    return props.mess
})

const showMessage = computed(() => {
    return MESS.value.replace(/\n/g, function () {
        return '<br/>'
    })
})

const SLOW = ref("")
let index = 0
let timer
if (flag) { timer = setInterval(() => { printCharacter() }, 25) }
function printCharacter() {
    if (index == MESS.value.length) {
        emit("printOK")
        clearInterval(timer)
    } else {
        SLOW.value = SLOW.value + MESS.value[index]
        SLOW.value=SLOW.value.replace(/\n/g, function () {
        return '<br/>'
    })
        index += 1
        emit("goUnder")
    }
}

</script>

<style scoped>
.gpt-bg {
    width: 92%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.gpt-ico {
    width: 30px;
    height: 30px;
    margin-top: 10px;
}

.gpt-mess {
    font-size: 15px;
    background: var(--Chat_Gpt_backGround2);
    color: var(--Chat_Gpt_backGround3);
    line-height: 200%;
    padding: 10px;
    border-radius: 20px;
    word-break: break-all;
}
</style>